<!--商品详情-->
<template lang="html">
	<div>
		<van-nav-bar
		  class="head_top"	
		  title=""
		  left-arrow
		  @click-left="onClickLeft"
		  @click-right="onClickRight"
		>		
			<van-icon name="arrow-left" slot="left" color="#333"  size="20"/>
			<van-icon name="weapp-nav" slot="right" color="#333" size="20"/>
	    </van-nav-bar>
	    
	    <div class="wrap">
           <Floor1 :userInfo="userInfo" :lastAccesstime="lastAccesstime"></Floor1>
           <div class="m_desc">
             {{userInfo.comDesc}}   
             
             <div>感兴趣的话给我留言吧！</div>
           </div>
           <div class="m_desc_img" v-for="(item,index) in userInfo.goodsImageList">
           	  <img :src="item" alt="" v-if="index==0" style="border-radius: 10px 10px 0 0;"/>
           	  <img :src="item" alt="" v-else/>
           </div>
	    </div>
        
       
        <floor22 ref="floor22" @showInput="showInput"
        	 @replyLeaver='replyLeaver'></floor22>
        


        

        <div style="height: 50px;background:  #f2f2f2;"></div>
        
        
        <div class="inputBox" v-if="showInputBox">
        	<div class="boxWrap">
	        	<div class="i1" @click="hiddenInput">
	        		<van-icon name="comment-o" size="30" class="icon"/>
	        	</div>
	        	<div class="i2">
	        		<img :src="userInfo.avatar" alt="" />
	        	</div>
	        	<div class="i3">
	        		<input type="text" v-focus="isFocus" 
	        			style="-webkit-user-select: auto;-moz-user-select: auto;" 
	        			autocomplete="off" @focus="abc" 
	        		    id="inputId"
	        			v-model="test"
	        			class="sendInput" :placeholder="placeholder"/>
	        	</div>
	        	<div class="i4">
	        		<span class="send" @click="send()">发送</span>
	        	</div>	     		
        	</div>
        </div>
        
        
		<van-goods-action v-show="!showInputBox">
		  <van-goods-action-icon icon="good-job-o"  v-if="isPraise==0"
		  	text="超赞"  @click="changePraise(1)"/>
		  <van-goods-action-icon icon="good-job" v-if="isPraise>0" 
		  	icon-class="bottomIcon" text="超赞" @click="changePraise(0)"/>
		  	
		  <van-goods-action-icon icon="chat-o" text="留言" @click="showInput"/>
		  
		  <van-goods-action-icon icon="star-o" text="收藏" 
		  	v-if="isCollection==0" @click="changeCollection(1)"/>
		  <van-goods-action-icon icon="star" icon-class="bottomIcon" 
		  	text="收藏" v-if="isCollection>0" @click="changeCollection(0)"/>
		  	
		  <van-goods-action-button type="danger" text="我想要" @click="buy" />
		</van-goods-action>	    

	</div>

</template>                                                                

<script>
import Floor1 from '_c/market/floor/floor01.vue'
import Floor22 from '_c/market/floor/floor22.vue'
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()
export default {
	name: 'GoodsDetail',	
	components: {
	    Floor1,Floor22
	},	
	data() {
       return {
       	   disGid:'',   // 主要用于回复买家 
       	   parentId:0, // 用于记录当前针对的是谁的留言 0就是第一级留言
       	   test:'', // 用于绑定输入框的值
       	   isFocus:false, // 用于绑定是否自动获取焦点
       	   placeholder:'看对眼就留言,问问更多细节 ~',
       	   showInputBox:false,  // 用于绑定是否显示输入框
       	   url1:this.$api+'/marketorderservice/api/v1/market/goods', // 请求商品详情的接口
       	   url2:this.$api+'/marketorderservice/api/v1/market/goodsAddRelation' ,
       	   url3:this.$api+'/marketorderservice/api/v1/market/goodsMinusRelation',
       	   url4:this.$api+'/marketorderservice/api/v1/market/addDiscuss', // 发送留言
       	   url5:this.$api+'/marketorderservice/api/v1/market/addGoodsHistory', // 进入页面生成浏览记录
           comId:'',  // 用于绑定当前商品的ID
           userInfo:{}, // 用于绑定当前用户信息
           isCollection:0, // 用于绑定是否收藏
           isPraise:0,      // 用于绑定是否超赞
           lastAccesstime:'', // 用于绑定最后登录时间
           userId:0         // 绑定用户userId 
       }
	},
	methods: {	
		// 点击超赞事件
		changePraise(num){
			let that=this
			let url=num>0?this.url2:this.url3
            let params={
            	userId:this.userId,
            	relationtype:1,
            	typeId:this.comId
            }
		    this.$Axios2.Post(url,params)
		    .then(function(res) {
		      let test=num>0?'超赞成功':'已取消超赞'
              that.isPraise=num>0?1:0
              that.$toast(test)
		    })			
		},
		// 点击收藏事件
		changeCollection(num){
			let that=this
			let url=num>0?this.url2:this.url3
            let params={
            	userId:this.userId,
            	relationtype:2,
            	typeId:this.comId
            }
		    this.$Axios2.Post(url,params)
		    .then(function(res) {
		      let test=num>0?'收藏成功':'已取消收藏'
              that.isCollection=num>0?1:0
              that.$toast(test)
		    })			
		},
	    onClickRight() {
	      this.$toast('点击了分享按钮')
	    }, 
	    buy(){
	      	let that=this	  
	      	let params={
	      		userId:this.userId,
	      		relationtype:3,
	      		typeId:this.comId
	      	}
		    this.$Axios2.Post(this.url2,params)
		    .then(function(res) {	
		    	 let arg='[{"userId":"'+that.userId+'"},{"comId":"'+that.comId+'"}]' 
                 that.link('/market/im/seller',arg)
		    })	       	 	     
	    },
	    // 获取详情信息
	    getData(){
	      	let that=this	      	
		    this.$Axios2.Get(this.url1+'/'+this.comId+'/'+this.userId)
		    .then(function(res) {
		       // console.log(res)
               that.userInfo=res.data;
               that.isPraise=res.data.goodsIsPraise
               that.isCollection=res.data.goodsIsCollection
               that.lastAccesstime=that.timeago(res.data.lastAccesstime)
		    })		    	
	    },
	    // 显示输入框
	    showInput(){
	    	let that=this	    	
		    that.isFocus=true
		    that.showInputBox=true		    		  		
	    },
	    // 苹果的后期需要调试
	    abc(){
	    	 document.body.scrollTop = document.body.scrollHeight;
	    },
	    // 隐藏输入框
	    hiddenInput(){
	    	let that=this
	    	that.parentId=0
	    	that.placeholder='看对眼就留言,问问更多细节 ~'
	    	that.isFocus=false
	    	that.showInputBox=false	    			    	
	    },
	    // 发送留言
	    send(){
	    	if(this.test==''){
	    		this.$toast('留言或回复不能为空')
	    		return false
	    	}
	    	let params={
	    		disTxt:this.test,
	    		disUid:this.userId,
	    		disCid:this.comId,
	    		disParentid:this.parentId,
	    		disGid:this.disGid
	    	}	    	
	      	let that=this
		    this.$Axios2.Post(this.url4,params)
		    .then(function(res) {	
		       that.$refs.floor22.addLeaver()               
               that.test='' // 重置输入框
               that.parentId=0 // 重置评论级别
               that.placeholder='看对眼就留言,问问更多细节 ~' // 重置提示
               that.disGid='' // 重置被评论人的ID
		    })
	    },
	    // 切换回复人
	    replyLeaver(obj){
	    	this.placeholder="@回复"+obj.disNickname
	    	if(obj.disParentid!='0'){
	    		this.parentId=obj.disParentid
	    		this.disGid=obj.disUid
	    	}else{
	    		this.parentId=obj.disId
	    		this.disGid=''
	    	}
	    	this.showInput()
	    },
	    // 添加浏览记录
	    addHistory(){
	      	let that=this
	      	let params={
	      		userId:this.userId,
	      		comId:this.comId 
	      	}
		    this.$Axios2.Post(this.url5,params)    	
	    }
	    
	},
	mixins:[publicFun],//混入
	mounted() {
		this.comId=this.$router.currentRoute.query.comId;
		this.userId=this.$router.currentRoute.query.userId;
		this.getData()
		this.addHistory()
		
	}
}
</script>

<style scoped>
.wrap{padding: 10px 10px 10px;margin-top: 50px;}
.van-nav-bar__title{font-weight: bold;}
.m_desc{font-size: 14px;margin-top: 10px;margin-bottom: 10px;line-height: 1.6;}
.m_desc_img>img{width: 100%;display: block;}
.m_desc_img:nth-last-child(1)>img{border-radius: 0px 0px 10px 10px;}



.inputBox{position: fixed;bottom: 0;left: 0;
height: 50px;box-sizing: border-box;
z-index: 200;width: 100%;}
.inputBox .boxWrap{width: 100%;
background: #fff;display: flex;padding: 10px 5px;}
.i1{width: 30px;height: 30px;display: flex;
justify-content: center;align-items: center;}
.icon{color: #888;}
.i2{width: 38px;height: 30px;padding-left: 8px;}
.i2>img{display: block;width: 30px;height: 30px;border-radius: 4px;}
.i3{flex: 1;padding-left: 8px;}
.i4{padding-left: 8px;}
.send{border-radius:4px;background:#ffea3f;display: inline-block;padding: 9px 9px 6px;}
.sendInput{height: 30px;border:none;border-radius: 10px;padding-left: 10px;
width: 100%;background: #F0F0F0;}
</style>